<template>
    <div
        class="xiaoquan-collapse-item"
        :class="{
            'is-disabled': disabled
        }"
    >
        <!-- 标题部分 -->
        <div
            class="xiaoquan-collapse-item__header"
            :class="{
                'is-disabled': disabled,
                'is-active': isActive
            }"
            :id="`item-header-${name}`"
            @click="itemClickHandle"
        >
            <slot name="title">{{ title }}</slot>
            <XiaoQuan-Icon icon="angle-right" class="header-angle"></XiaoQuan-Icon>
        </div>
        <!-- 内容部分 -->
        <Transition name="slide" @="transitionEvents">
            <div class="xiaoquan-collapse-item__wrapper" v-show="isActive">
                <div class="xiaoquan-collapse-item__content" :id="`item-content-${title}`">
                    <slot/>
                </div>
            </div>
        </Transition>
    </div>
</template>

<script setup>
    import { inject, computed } from "vue";
    import { collapseContextKey, collapseItemProps } from "./props";
    defineOptions({
        name: "XiaoQuan-CollapseItem"
    });
    const props = defineProps(collapseItemProps);
    const collapseContext = inject(collapseContextKey); // 上下文 跨组件通信
    const isActive = computed(()=> collapseContext.activeNames.value.includes(props.name));
    const itemClickHandle = ()=> {
        if(props.disabled) return;
        collapseContext.handleItemClick(props.name);
    }
    const transitionEvents = {
        beforeEnter(el) {
            el.style.height = '0px';
            el.style.overflow = 'hidden';
        },
        enter(el) {
            el.style.height = `${el.scrollHeight}px`;
        },
        afterEnter(el) {
            console.log(el);
            el.style.height = '';
            el.style.overflow = '';
        },
        beforeLeave(el) {
            el.style.height = `${el.scrollHeight}px`;
            el.style.overflow = 'hidden';
        },
        leave(el) {
            el.style.height = '0px';
        },
        afterLeave(el) {
            el.style.height = '';
            el.style.overflow = '';
        }
    };
    console.log(collapseContext, props);
</script>

<style lang="scss"></style>